<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>输血管理系统</title>
    <!--  <link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico">-->
    <link rel="stylesheet" href="../../element-theme/blue/index.css">
    <link rel="stylesheet" href="../../css/aui-blue.min.css">
</head>

<body>
<div v-cloak class="aui-page page-login">
    <div class="login-wrapper">
        <!-- page-header -->
        <header class="aui-page-header">
            <h2 class="aui-brand">输血管理系统</h2>
            <ul class="aui-intro">
                <li></li>
            </ul>
        </header>
        <!-- page-main -->
        <main class="aui-page-main" style="margin-top: 30px;">
            <h3 class="page-title">登录</h3>
            <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()">
                <!--          <el-form-item prop="language">-->
                <!--            <el-select v-model="dataForm.language" placeholder="语言选择" class="w-100">-->
                <!--              <el-option label="简体中文" value="zh-CN"></el-option>-->
                <!--              <el-option label="繁體中文" value="zh-TW"></el-option>-->
                <!--              <el-option label="English" value="en-US"></el-option>-->
                <!--            </el-select>-->
                <!--          </el-form-item>-->
                <el-form-item prop="username">
                    <el-input v-model="dataForm.username" placeholder="用户名／工号">
              <span slot="prefix" class="el-input__icon">
                <svg class="icon-svg" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
              </span>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="dataForm.password" type="password" placeholder="密码">
              <span slot="prefix" class="el-input__icon">
                <svg class="icon-svg" aria-hidden="true">
                  <use xlink:href="#icon-lock"></use>
                </svg>
              </span>
                    </el-input>
                </el-form-item>
                <el-form-item prop="captcha">
                    <el-row :gutter="20">
                        <el-col :span="14">
                            <el-input v-model="dataForm.captcha" placeholder="验证码" >
                  <span slot="prefix" class="el-input__icon">
                    <svg class="icon-svg" aria-hidden="true">
                      <use xlink:href="#icon-safetycertificate"></use>
                    </svg>
                  </span>
                            </el-input>
                        </el-col>
                        <el-col :span="10" class="login-captcha">
                            <div class="ValidCode disabled-select"
                                 @click="refreshCode">
                                <!--                  <span v-for="(item, index) in dataForm.codeList" :key="index"-->
                                <!--                    :style="getStyle(item)">{{item.code}}</span>-->
                                <el-col :span="35" class="login-captcha">
                                    <img :src=captchacode>
                                    <!--                    <img src = "-->
                                    <!--">-->
                                </el-col>


                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item size="mini">
                    <div class="base-line-height clearfix">
                        <el-checkbox v-model="dataForm.rememb" class="f-left">记住密码</el-checkbox>
                        <a href="forget.html" class="f-right">忘记密码？</a>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button class="w-100" type="primary" @click="dataFormSubmitHandle()" >登录
                    </el-button>
                </el-form-item>
            </el-form>
            <p class="login-guide">还没有账号？<a href="register.html">立即注册</a></p>
        </main>
        <!-- page-footer -->
        <footer class="aui-page-footer">
            <p>
                MingHsZzz
            </p>
            <!--        <p>-->
            <!--          <a href="http://aui.demo.renren.io/" target="_blank">在线演示</a>-->
            <!--        </p>-->
            <!--        <p><a href="https://www.renren.io/" target="_blank">人人开源</a>2018 © renren.io</p>-->
        </footer>
    </div>
</div>
<script src="../../temp/vue-2.5.17/vue.js"></script>
<script src="../../temp/element-2.4.5/index.js"></script>
<script src="../../icons/iconfont.js"></script>
<script type="application/javascript" src="../../js/jquery.min.js"></script>
<script>Vue.prototype.$ELEMENT = {size: 'medium'};</script>
<script>
    (function () {
        var vm = window.vm = new Vue({
            el: '.aui-page',

            data: function () {
                // 验证码自定义验证规则
                const validateVerifycode = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('验证码不能为空'))
                    }else {
                        callback()
                    }
                }

                return {
                    dataForm: {
                        language: 'zh-CN',
                        username: '',
                        password: '',
                        captcha: 'a',
                        rememb: false,
                        codeList: [],
                        code: ''
                    },
                    captchacode: "",
                    dataRule: {
                        username: [
                            {required: true, message: '必填项不能为空', trigger: 'blur'}
                        ],
                        password: [
                            {required: true, message: '必填项不能为空', trigger: 'blur'}
                        ],
                        captcha: [
                            {required: true, trigger: 'blur', validator: validateVerifycode}
                        ]
                    }
                }
            },

            props: {
                width: {
                    type: String,
                    default: '100%'
                },
                height: {
                    type: String,
                    default: '34px'
                },
                length: {
                    type: Number,
                    default: 4
                }
            },

            beforeCreate() {
                vm = this;
            },

            mounted() {
                this.getCaptcha()
                // this.createdCode()
                // this.getCookie()
            },

            methods: {
                // submitForm() {
                //     this.$refs["submitForm"].validate((valid) => {
                //         if (valid) {
                //
                //             alert('submit!');
                //
                //
                //
                //
                //         } else {
                //             console.log('error submit!!');
                //             return false;
                //         }
                //     });
                // },
                dataFormSubmitHandle() {

                    vm.$refs['dataForm'].validate(function (valid) {
                        // console.log(valid)
                        if (valid) {
                            var userdata = "username="+vm.dataForm.username + "&password="+vm.dataForm.password+"&captcha="+vm.dataForm.captcha
                            $.ajax({
                                url: "/userlogin",
                                type: "POST",
                                data: userdata
                            }).then(res =>{
                                if(res.code == 200){
                                    sessionStorage.setItem("lastClickTime", new Date().getTime());
                                    sessionStorage.setItem("user",JSON.stringify(res.user))
                                    vm.$message(
                                        {
                                            message:res.msg,
                                            type:"success"
                                        }
                                    )
                                    setTimeout(()=>{
                                        location.href = "/main"
                                    },1000)
                                }else{
                                    vm.$message(
                                        {
                                            message:res.msg,
                                            type:"error"
                                        }
                                    )

                                }






                            })


                        }
                    });



                    // console.log(this.dataForm)









                },
                getCaptcha() {
                    $.get("/before/getcaptcha").then(res => {
                        this.captchacode = "data:image/png;base64," + res.data;
                    })
                },
                //刷新验证码
                refreshCode() {
                    this.getCaptcha()
                },
                // 记住用户
                rememberUser() {
                    //判断复选框是否被勾选 勾选则调用配置cookie方法
                    if (this.dataForm.rememb == true) {
                        //传入账号名，密码，和保存天数三个参数
                        this.setCookie(this.dataForm.username, this.dataForm.password, 7);
                    } else {
                        //清空Cookie
                        this.clearCookie();
                    }
                },

                //设置cookie
                setCookie(username, password, exdays) {
                    let exdate = new Date(); //获取时间
                    exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                    //字符串拼接cookie
                    window.document.cookie =
                        "username" + "=" + username + ";path=/;expires=" + exdate.toGMTString();
                    window.document.cookie =
                        "password" + "=" + password + ";path=/;expires=" + exdate.toGMTString();
                },

                // 读取cookie
                getCookie: function () {
                    if (document.cookie.length > 0) {
                        let arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
                        for (let i = 0; i < arr.length; i++) {
                            let arr2 = arr[i].split("="); //再次切割
                            //判断查找相对应的值
                            if (arr2[0] == "username") {
                                this.dataForm.username = arr2[1]; //保存到保存数据的地方
                            } else if (arr2[0] == "password") {
                                this.dataForm.password = arr2[1];
                            }
                        }
                    }
                },

                //清除cookie
                clearCookie: function () {
                    this.setCookie("", "", -1); //修改两个值都为空，天数为-1天就好了
                },
            }
        });
    })();
</script>
</body>

</html>